<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo">SEO</div>
      <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline">
        <a-menu-item
          v-for="item in menulist"
          :key="item.key"
          @click="toPath(item)"
        >
          <component :is="item.component"></component>
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <span class="tabName">{{ tabName }}</span>
      </a-layout-header>
      <a-layout-content style="margin: 16px">
        <div
          :style="{
            padding: '24px',
            background: '#fff',
            height: '100%',
          }"
        >
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        SEO Tools ©2022 Created by Mr.Z
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import {
  DesktopOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  AndroidOutlined,
  FileImageOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, toRaw } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    DesktopOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    AndroidOutlined,
    FileImageOutlined,
  },
  setup() {
    const router = useRouter();
    const tabName = ref<any>("APP软件包检测");
    const selectedKeys = ref<string[]>(["1"]);
    const menulist = [
      {
        key: "1",
        path: "/detectionApk",
        name: "APP软件包检测",
        component: "AndroidOutlined",
      },
      {
        key: "2",
        path: "/analysisApk",
        name: "批量APP软件包检测",
        component: "AndroidOutlined",
      },
      {
        key: "3",
        path: "/title",
        name: "获取网页标题",
        component: "desktop-outlined",
      },
      {
        key: "4",
        path: "/imgCropping",
        name: "图片裁剪",
        component: "FileImageOutlined",
      },
    ];
    let fullPath = toRaw(router).currentRoute.value.fullPath;
    menulist.forEach((e: any) => {
      if (e.path == fullPath) {
        selectedKeys.value = [e.key];
      }
    });
    const toPath = (item: any) => {
      tabName.value = item.name;
      router.push({
        path: item.path,
      });
    };
    return {
      collapsed: ref<boolean>(false),
      selectedKeys,
      tabName,
      menulist,
      toPath,
    };
  },
});
</script>
<style lang="less" scoped>
.tabName {
  font-size: 20px;
}
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.trigger:hover {
  color: #1890ff;
}
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
  color: #fff;
  display: flex;
  justify-content: center;
  line-height: 32px;
  font-size: 19px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>
